<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>信息管理</title>
		
	<style>
	    main {
	      width: 1200px;
	      margin: 0 auto;
	      border: 1px solid blue;
	    }
	
	    .m-search {
	      padding: 10px;
	      border: 1px solid gray;
	    }
	
	    .m-cont {
	      padding: 10px;
	      border: 1px solid gray;
	    }
	
	    table {
	      width: 100%;
	      text-align: center;
	    }
	
	    tr {
	      height: 40px;
	    }
	
	    table,
	    td,
	    th {
	      border: 1px solid orange;
	      border-collapse: collapse;
	    }
    </style>
		
		
	</head>
	<body>
		
	<main>
    <div class="m-search">
      	姓名: <input type="text" name="name" id="uname"><button>搜索</button><a href="add.html">添加</a>
    </div>
    
    
    <div class="m-cont">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>班级</th> 
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>电话</th>                                  
            <th>地址</th>          
            <th>职业</th>
            <th>日期</th>
            <th>操作</th>
			<th>操作</th>
          </tr>
          
          
          
          
          
        </thead>
        
        
        <tbody>

        </tbody>
        
        
        
      </table>
    </div>
  </main>
  
  	<script type="text/javascript">
  		function getDate(cname) {
			//Get请求模板
				//1.创建XMLHttpRequest()对象
				var xhr=new XMLHttpRequest();	
				//2.添加状态改变的回调函数
				xhr.onreadystatechange=function(){				
					//5.判断请求状态为4
					if(xhr.readyState==4){
						//6.判断响应状态码
						if(xhr.status>=200&&xhr.status<=300||xhr.status==304){
							//console.log(xhr.response);//获取的是一个数组
							var arr=JSON.parse(xhr.response)
							console.log(arr)
							var str=``;
							arr.forEach((stu)=>{
								str+=`
							<tr>
								
					          	<td>${stu.id}</td>
					          	<td>${stu.clazz}</td>
					          	<td>${stu.name}</td>					 
					          	<td>${stu.gender}</td>
					          	<td>${stu.age}</td>
					          	<td>${stu.hobby}</td>
					          	<td>${stu.tel}</td>
					          	<td>${stu.address}</td>
					          	<td>${stu.remark}</td>
					          	<td>${stu.date}</td>
					          	<td><a href="update.html#${stu.id}">修改</a></td>
					          	<td><a href="javascript:del(${stu.id});">删除</a></td>
					         </tr>	
									`
							});
							document.querySelector('tbody').innerHTML=str;
						}
					}
				}
				//3.打开连接设置请求方式和url
				var url="http://localhost:3008/api/student/getStudent";
				if (cname) {
					url+="?name="+cname
				}
				xhr.open("GET",url)
				//4.发送请求
				xhr.send();
		}
		
		getDate();

  		
		
		document.querySelector('button').onclick=function(){
  			var unname=document.querySelector('#uname');
  			getDate(unname.value)
  		}
  		
  		function del(id) {
			if (confirm("是否删除")) {
				console.log(id);
				//1.创建XMLHttpRequest()对象
				var xhr=new XMLHttpRequest();	
				//2.添加状态改变的回调函数
				xhr.onreadystatechange=function(){				
					//5.判断请求状态为4
					if(xhr.readyState==4){
						//6.判断响应状态码
						if(xhr.status>=200&&xhr.status<=300||xhr.status==304){
							getDate();
						}
					}
				}
				//3.打开连接设置请求方式和url
				var url="http://localhost:3008/api/student/removeStudent?id="+id;
				xhr.open("POST",url)
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
				//4.发送请求
				xhr.send("id="+id);
			}	
		}
  		
  		
  	</script>
  
		
		
		
	</body>
</html>
